<template>
  <div class="page-container-padding">
    <div style="width: 700px">
      <el-form
        ref="ruleForm"
        label-width="140px"
        :rules="formRules"
        :model="formData"
      >
        <el-form-item prop="start_date" label="开始日期">
          <el-date-picker
            v-model="formData.start_date"
            value-format="yyyy-MM-dd"
            size="mini"
            :clearable="false"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
            v-model="formData.end_date"
            size="mini"
            :clearable="true"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="company_name" label="服务对象名称">
          <el-input
            v-model="formData.company_name"
            placeholder="服务对象的名称"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item prop="company_locate" label="服务对象所属区域">
          <el-input
            v-model="formData.company_locate"
            placeholder="对象所在的省市等"
            style="margin-left: 5px"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item prop="company_area" label="服务对象所属行业">
          <div style="display: flex">
            <el-select v-model="formData.company_area" style="width: 240px">
              <el-option value="农业" label="农业"></el-option>
              <el-option value="工业" label="工业"></el-option>
              <el-option value="其他" label="其他"></el-option>
            </el-select>
            <el-input
              v-model="formData.company_area_note"
              placeholder="对象所属行业具体说明"
              style="margin-left: 5px"
              maxlength="200"
              show-word-limit
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="company_type" label="服务对象类型">
          <div style="display: flex">
            <el-select v-model="formData.company_type" style="width: 240px">
              <el-option value="国企" label="国企"></el-option>
              <el-option value="民营企业" label="民营企业"></el-option>
              <el-option value="上市公司" label="上市公司"></el-option>
              <el-option value="中小企业" label="中小企业"></el-option>
              <el-option value="其他" label="其他"></el-option>
            </el-select>
            <el-input
              v-model="formData.company_type_note"
              placeholder="服务对象类型的具体说明"
              style="margin-left: 5px"
              maxlength="200"
              show-word-limit
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="service_model" label="企业参与形式">
          <div style="display: flex">
            <el-select v-model="formData.service_model" style="width: 240px">
              <el-option value="套期保值" label="套期保值"></el-option>
              <el-option value="套利" label="套利"></el-option>
              <el-option value="点价" label="点价"></el-option>
              <el-option value="风险管理" label="风险管理"></el-option>
              <el-option value="其他" label="其他"></el-option>
            </el-select>
            <el-input
              v-model="formData.service_model_note"
              style="margin-left: 5px"
              placeholder="企业参与形式的具体说明"
              maxlength="200"
              show-word-limit
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="varieties" label="涉及品种">
          <el-input
            v-model="formData.varieties"
            placeholder="填写项目涉及的品种"
          ></el-input>
        </el-form-item>
        <el-form-item label="案例摘要">
          <el-input
            v-model="formData.summary"
            placeholder="案例主体、品种、模式、服务效果"
            :rows="6"
            type="textarea"
            maxlength="1000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item prop="annex" label="附件">
          <el-upload
            action="''"
            :before-upload="() => false"
            :multipe="false"
            :on-change="annexChange"
          >
            <el-button size="small" type="infor">选择附件</el-button>
          </el-upload>
          <span style="color: #0275fe">{{ annexFileName }}</span>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="float: right; height: 40px; width: 100px"
            @click="toSaveForm"
          >
            提交保存
          </el-button>
        </el-form-item>
      </el-form>
      <div style="font-size: 11px; color: #666; margin-left: 140px">
        附件内容提示：
        <p>
          一、案例摘要(概括案例主体、对象、品种、模式、服务效果，应涵盖关键数据)
        </p>
        <p>二、项目背景</p>
        <p>三、案例开展综述及总结</p>
        <p>四、案例的亮点、特色或创新点</p>
        <p>五、案例的可复制性、推广性、影响力</p>
      </div>
    </div>
  </div>
</template>
<script>
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import { SaveMyIndustrialService } from '@/api/departmentWork/industrialService'
  export default {
    data() {
      return {
        formData: {
          start_date: datetimeToStr(new Date(), 'true', '-'),
          end_date: null,
          company_name: '',
          company_locate: '',
          company_area: '',
          company_area_note: '',
          company_type: '',
          company_type_note: '',
          service_model: '',
          service_model_note: '',
          varieties: '',
          summary: '',
        },
        annexFile: null,
        annexFileName: '',
        formRules: {
          start_date: [
            { required: true, message: '请选择服务开始日期', trigger: 'blur' },
          ],
          company_name: [
            { required: true, message: '请填写服务对象名称', trigger: 'blur' },
          ],
          company_locate: [
            {
              required: true,
              message: '请填写服务对象所在区域',
              trigger: 'blur',
            },
          ],
          company_area: [
            {
              required: true,
              message: '请选择服务对象所属行业',
              trigger: 'change',
            },
          ],
          company_type: [
            {
              required: true,
              message: '请选择服务对象所属类型',
              trigger: 'change',
            },
          ],
          service_model: [
            {
              required: true,
              message: '请选择主要服务模式',
              trigger: 'change',
            },
          ],
          varieties: [
            {
              required: true,
              message: '请填写项目涉及的品种',
              trigger: 'blur',
            },
          ],
          annex: [
            {
              required: true,
              message: '请选择附件文件',
              trigger: 'change',
            },
          ],
        },
      }
    },
    mounted() {},
    methods: {
      // 选择附件改变
      annexChange(file, fileList) {
        this.annexFile = file.raw
        this.annexFileName = file.name
        this.$refs['ruleForm'].clearValidate('annex') //清除文字校验
        delete this.formRules['annex']
      },

      // 保存信息
      toSaveForm() {
        this.$refs['ruleForm'].validate((validate) => {
          console.log(validate)
          if (validate) {
            // 发起保存请求
            let dataForm = new FormData()
            dataForm.append('annex', this.annexFile)
            dataForm.append('start_date', this.formData.start_date)
            dataForm.append(
              'end_date',
              this.formData.end_date ? this.formData.end_date : ''
            )
            dataForm.append('company_name', this.formData.company_name)
            dataForm.append('company_locate', this.formData.company_locate)
            dataForm.append('company_area', this.formData.company_area)
            dataForm.append(
              'company_area_note',
              this.formData.company_area_note
            )
            dataForm.append('company_type', this.formData.company_type)
            dataForm.append(
              'company_type_note',
              this.formData.company_type_note
            )
            dataForm.append('service_model', this.formData.service_model)
            dataForm.append(
              'service_model_note',
              this.formData.service_model_note
            )
            dataForm.append('varieties', this.formData.varieties)
            dataForm.append('summary', this.formData.summary)
            SaveMyIndustrialService(dataForm).then((res) => {
              this.$baseMessage(res.msg, 'success')
              this.annexFileName = ''
              this.annexFile = null
              // 加入文字校验规则
              this.formRules['annex'] = [
                {
                  required: true,
                  message: '请选择附件文件',
                  trigger: 'change',
                },
              ]
            })
          }
        })
      },
    },
  }
</script>
<style scoped lang="scss"></style>
